.header{
    position: relative;
    height: 5rem;
   
    background-color: #333;
    padding: 0 1.5rem;

    display: flex;
}

.header .logo{
    color:#fff;
    line-height: 5rem;
}

.header .nav-list{
    margin-left:10rem;
    
    display:flex;
    justify-content: space-between;
}
.header .nav-item{
    width: 15rem;  
}
.header .nav-lk{
    display: inline-block;
    font-size: 1.6rem;
    color: #eee;
    line-height: 5rem;
}

.header .fa-bars{
    display:none;
    color:#fff;
    font-size: 2rem;
    line-height: 5rem;
    margin-left: auto;
}

.banner{
    position: relative;
    height: 60vh;
    background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3002697306,2568791890&fm=26&gp=0.jpg) no-repeat center/cover;
}
.banner .avator{
    width: 13rem;
    height: 22rem;

    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -6.5rem;
    margin-top: -11rem;
}
.banner .avator img{
    border-radius: 50%;
    border:.5rem solid #ddd;
    box-shadow: .5rem .8rem 1rem #333;
}
.banner .avator .title{
    margin-top: .5rem;
    font-size: 2rem;
    text-align: center;
    color:#fff;
    text-shadow: .2rem .4rem .5rem #000;
}
.course-board{
    width: 120rem;
    margin: 5rem auto;
    

    display: flex;
    justify-content: space-between;
}
.course-board .course-card{
    width: 25%;
    padding: 1rem;
    border: .1rem solid transparent;

    font-size: 1rem;
    text-align: center;
}
.course-board .course-card:hover{
    border-color: #ddd;
}